<template>
  <div id="c2c_user" class="c2c_user">
    <div class="w-full h-full top">
      <order-nav/>
      <div class="flex pl-32 pr-32 mt-20">
        <div class="avatar w-70 h-70 flex items-center font-700 font-34 justify-center">C</div>
        <div class="ml-25 text-white">
          <div class="font-34">{{ email }}</div>
          <div class="mt-17 font-24">{{ $t('认证用户') }}</div>
          <div class="flex items-center mt-28 font-26">
            <div class="flex items-center h-30 mr-48">
              <span class="mr-12">{{ $t('邮箱') }}</span>
              <img class="w-20 h-20 relative top-4" src="~@/assets/image/c2c/gou.png" alt="">
            </div>
            <div class="flex items-center h-30 mr-48">
              <span class="mr-12">{{ $t('手机') }}</span>
              <img class="w-20 h-20 relative top-4" src="~@/assets/image/c2c/gou.png" alt="">
            </div>
            <div class="flex items-center h-30 mr-48">
              <span class="mr-12">{{ $t('身份') }}</span>
              <img class="w-20 h-20 relative top-4" src="~@/assets/image/c2c/gou.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
        ref="content"
        class="content absolute left-0 w-full bg-white  pt-40 box-border"
    >
      <div class="pr-50 pl-50">
        <div class="flex" style="color: #868D9A">
          <div class="flex-1">
            <h2 class="mb-18 font-700 font-40 text-black">3</h2>
            <div class="font-28">{{ $t('30日成单数') }}</div>
          </div>
          <div class="flex-1">
            <h2 class="mb-18 font-700 font-40 text-black">90.12%</h2>
            <div class="font-28">{{ $t('30日成单数') }}</div>
          </div>
        </div>
        <div class="w-full mt-54">
          <van-cell-group class="w-full font-24 box-border">
            <van-cell class="mb-28" :title="$t('平均放行')" value="2.48分钟"/>
            <van-cell  :title="$t('平均付款')" value="0.00分钟"/>
          </van-cell-group>
        </div>
      </div>

      <div class="flex items-center justify-center mt-30 more pb-32 mb-48" @click="enterMore">
        <span class="font-25 mr-12">{{ $t('更多数据') }}</span>
        <span><van-icon name="arrow" color="#868D9A"/></span>
      </div>

      <div class="font-28">
        <van-cell-group class="w-full font-24 box-border pr-50 pl-50">
          <van-cell class="mb-28 items-center ">
            <template #icon>
              <img class="w-28 h-28 mr-34" src="~@/assets/image/c2c/group285.png" alt="">
            </template>
            <template #title>
              <span class="text-black font-28">{{ $t('收到评价') }}</span>
            </template>
            <template #default>
              <span class="mr-20 font-28" style="color: #A7ADB8">1</span>
            </template>
            <template #right-icon>
              <van-icon name="arrow" class="font-700" color="#868D9A"/>
            </template>
          </van-cell>
          <van-cell class="mb-28 mt-100 items-center ">
            <template #icon>
              <img class="w-28 h-28 mr-34" src="~@/assets/image/c2c/group287.png" alt="">
            </template>
            <template #title>
              <span class="text-black font-28">{{ $t('收款方式') }}</span>
            </template>
            <template #default>
              <span class="mr-20 font-28" style="color: #A7ADB8">2</span>
            </template>
            <template #right-icon>
              <van-icon name="arrow" class="font-700" color="#868D9A"/>
            </template>
          </van-cell>
          <van-cell class="mb-28 mt-100 items-center ">
            <template #icon>
              <img class="w-28 h-28 mr-34" src="~@/assets/image/c2c/Subtract.png" alt="">
            </template>
            <template #title>
              <span class="text-black font-28">{{ $t('C2C帮助中心') }}</span>
            </template>
            <template #right-icon>
              <van-icon name="arrow" class="font-700" color="#868D9A"/>
            </template>
          </van-cell>
          <van-cell @click.native="enterSettings" class="mb-28 mt-100 items-center ">
            <template #icon>
              <img class="w-28 h-28 mr-34" src="~@/assets/image/c2c/group288.png" alt="">
            </template>
            <template #title>
              <span class="text-black font-28">{{ $t('C2C通知设置') }}</span>
            </template>
            <template #right-icon>
              <van-icon name="arrow" class="font-700" color="#868D9A"/>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
    <order-footer ref="footer"/>
  </div>
</template>

<script>
import {Cell, CellGroup, Icon,} from 'vant';
import OrderFooter from "@/page/c2cOrder/components/footer/OrderFooter";
import OrderNav from "@/components/order-nav/OrderNav";

export default {
  name: "advertiserInfo",
  props: ['uid'],
  data() {
    return {
      email: "cn*****.com",
    }
  },
  mounted() {
    this.height = this.$refs.footer.$el.getBoundingClientRect().height + this.$refs.content.getBoundingClientRect().top;
  },
  methods: {
    enterMore() {
      this.$router.push({
        path: '/c2cUser/c2cUserMore'
      })
    },
    // 进入通知设置
    enterSettings() {
      this.$router.push({
        path: '/c2cNoticeSettings'
      })
    }
  },
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    OrderFooter,
    OrderNav,
  }
}
</script>

<style lang="scss" scoped>
.top {
  height: 370px;
  background: #1D91FF;


  .avatar {
    border-radius: 50%;
    background: #21262F;
    color: #fff;
  }
}
.c2c_user{
  ::v-deep .van-nav-bar {
    background: #1D91FF;
  }
  ::v-deep .van-icon {
    color: #fff;
  }
}


.content {
  top: 300px;
  border-radius: 70px 70px 0 0;


  .more {
    position: relative;
    border-bottom: 1px solid #484756;
    color: #868D9A;

    .van-icon {
      font-size: 20px;
      font-weight: 600;
    }
  }
}
</style>
